<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>公积金补缴规则</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer payBackListPage">
      <div class="table-serch-bar">
        <el-form ref="form1" :inline="true" :model="search" size="medium">
          <el-form-item label="参保地">
            <addr-select :p_value.sync="search.addrId"></addr-select>
          </el-form-item>
          <el-form-item label="服务公司">
            <company-select :p_value.sync="search.companyId"></company-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        @selection-change="handleSelectionChange"
        class="my-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column width="55" align="center" type="selection" label="操作"></el-table-column>
        <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
        <el-table-column min-width="160" align="center" prop="addrName" label="参保地"></el-table-column>
        <el-table-column min-width="160" align="center" prop="allowSuppTypeCode" label="可补缴月份">
          <template slot-scope="scope">{{monthType[scope.row.allowSuppTypeCode]}}</template>
        </el-table-column>
        <el-table-column min-width="120" align="center" prop="suppBaseRuleCode" label="补缴基数">
          <template slot-scope="scope">{{Gloab.dataCode[scope.row.suppBaseRuleCode]}}</template>
        </el-table-column>
        <el-table-column min-width="240" align="center" prop="typeCode" label="补缴险种">
          <template slot-scope="scope">
            <span
              v-for=" (item,index) in scope.row.typeCode.split(',') "
              :key="index"
            >{{Gloab.dataCode[item]}}、</span>
          </template>
        </el-table-column>
        <el-table-column min-width="240" align="center" prop="companyName" label="服务公司"></el-table-column>
        <el-table-column min-width="90" align="center" prop="createUserName" label="创建人员"></el-table-column>
        <el-table-column min-width="120" align="center" sortable prop="createTime" label="创建时间"></el-table-column>
      </el-table>
      <div class="table-tools clearfix">
        <div class="fl">
          <el-button type="default" icon="iconfont iconview" size="medium" @click="viewPayBack">查看</el-button>
          <el-button type="default" icon="iconfont iconadd" size="medium" @click="addPayBack">添加</el-button>
          <el-button type="default" icon="iconfont iconedit" size="medium" @click="editPayBack">编辑</el-button>
          <el-button type="default" icon="iconfont icondelet1" size="medium" @click="delet">删除</el-button>
        </div>
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pageSize"
              layout="prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import CompanySelect from "../../components/CompanySelect";
import AddrSelect from "../../components/AccfundAddrSelect";

export default {
  name: "payBackList",
  components: {
    CompanySelect,
    AddrSelect
  },
  data() {
    return {
      selected: [],
      monthType: {
        "1": "无限制",
        "2": "不可补缴",
        "3": "限制补缴年月",
        "4": "限制补缴月数"
      },
      total: 0,
      pageInfo: {
        total: 0,
        pageSize: 10,
        page: 1
      },
      currentPage3: 1,
      tableData: [],
      search: {
        addrId: "",
        companyId: ""
      },
      value: "",
      value2: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList: function() {
      Http.api
        .get("/case/accfund/rule/search", {
          params: {
            addrId: this.search.addrId,
            companyId: this.search.companyId,
            page: this.pageInfo.page,
            pageSize: this.pageInfo.pageSize
          }
        })
        .then(res => {
          this.pageInfo.total = res.data.total;
          this.tableData = res.data.content;
        });
    },
    handleCurrentChange(val) {
      this.getList();
    },
    onSubmit() {
      this.currentPage3 = 1;
      this.getList();
    },
    // 删除提示
    // 删除提示
    delet() {
      this.$confirm("确定要删除该规则吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true
      })
        .then(() => {
          let ids = new Array();
          this.selected.forEach(e => {
            ids.push(e.id);
          });
          Http.api
            .post("/case/accfund/rule/del", { ids: ids })
            .then(res => {
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.selected.forEach(e => {
                this.tableData.splice(this.tableData.indexOf(e), 1);
              });
            })
            .catch(error => {
              this.$alert(error.msg, "提示", {
                confirmButtonText: "确定",
                customClass: "custom-modal",
                iconClass: "no-icon",
                showCancelButton: "flase",
                showCancelButton: false,
                type: "warning",
                center: true
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查看
    viewPayBack() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      } else {
        this.$router.push({
          path: "/case/viewFundPayBack",
          query: { id: this.selected[0].id }
        });
      }
    },
    //添加
    addPayBack() {
      this.$router.push({ path: "/case/addFundPayBack" });
    },
    // 编辑
    editPayBack() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      } else {
        this.$router.push({
          path: "/case/editFundPayBack",
          query: { id: this.selected[0].id }
        });
      }
    },
    handleSelectionChange: function(val) {
      this.selected = val;
    }
  }
};
</script>

